<template>
	<uni-header title="积分兑换"></uni-header>
	<view class="header">
		<image class="bg" src="../../static/integral-icon.png" mode=""></image>
		<view class="content">
			<view class="c-item">
				<text class="c-title">可用积分</text>
				<text class="value-price">0</text>
			</view>
			<view class="c-item">
				<text class="c-title">冻结积分</text>
				<text class="value-enprice">0</text>
			</view>
		</view>

	</view>

	<view class="input">
		<text class="label">兑换数量</text>
		<view class="price-input">
			
			<input type="number" v-model="num" />
			<text class="unit">≈5000CNY</text>
		</view>
		<text class="desc">今日兑换价格：1积分兑0.5CNY</text>
	</view>
	<button class="submit" @click="submit">兑换</button>
</template>

<script setup>
import { ref } from "vue";
	const num = ref()
	const submit = ()=>{
		if(!num.value || num.value<=0){
			uni.showToast({
				icon:"none",
				title:"请输入兑换数量"
			})
			return false
		}
		uni.showToast({
			icon:"none",
			title:"可用积分不足"
		})
	}
</script>

<style lang="scss" scoped>
	.content{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		padding: 0 80rpx;
		.c-item{
			display: flex;
			flex-direction: column;
			margin-top: 48rpx;
			.c-title{
				font-size: 24rpx;
				color: #fff;
				line-height: 36rpx;
			}
			.value-price{
				font-size: 48rpx;
				font-weight: 700;
				color: #fff;
				line-height: 56rpx;
			}
			.value-enprice{
				font-size: 32rpx;
				font-weight: 700;
				color: #fff;
				line-height: 56rpx;
			}
			
		}
	}
	.submit {
		width: 686rpx;
		height: 92rpx;
		background: #1E53E7;
		border-radius: 16rpx;
		position: absolute;
		bottom: 68rpx;
		left: 32rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 92rpx;
	}

	.label {
		display: block;
		color: #181D29;
		font-size: 28rpx;
	}

	.input {
		width: 622rpx;
		height: 220rpx;
		background: #FFFFFF;
		
		
		padding: 32rpx;
		margin: 32rpx auto;

		.price-input {
			width: 622rpx;
			height: 112rpx;
			display: flex;
			border-bottom: 2rpx solid #E8EBF5;
			align-items: center;

			.unit {
				color: #181D29;
				
				font-size: 28rpx;
				display: block;
			}

			input {
				display: block;
				flex: 2;
				height: 112rpx;
				
				font-size: 64rpx;
				color: #181D29;
				font-weight: 500;
			}
		}

		.desc {
			color: #1E53E7;
			font-size: 24rpx;
			display: block;
			margin-top: 32rpx;
		}
	}


	.header {
		width: 100%;
		height: 212rpx;
		position: relative;
		overflow: hidden;
	}

	.bg {
		display: block;
		width: 686rpx;
		height: 212rpx;
		position: absolute;
		left: 32rpx;
	}

	.title {
		color: #181D29;
		display: block;
		margin: 32rpx;
		font-weight: 500;
		font-size: 36rpx;
	}
</style>